<template>
  <el-dialog
    top="30px"
    width="850px"
    title="附件"
    append-to-body
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <h4>区县审批附件：</h4>
    <div
      v-if="!countyAttach.length && (level !== 3 || !isGov)"
      class="p-5 text-center text-muted border rounded bg-light my-4"
    >
      暂无附件
    </div>
    <ul class="list-inline" v-if="level !== 3 || !isGov">
      <li v-for="(item, index) in countyAttach" class="attach-item" :key="index">
        <div class="attach-item-wrap">
          <img
            alt=""
            class="attach-item-img"
            :src="item"
            @click.stop="handlePreview(index, countyAttach)"
          />
        </div>
      </li>
    </ul>
    <ul class="list-inline" v-else>
      <li v-loading="saveLoading" class="attach-item">
        <upload-oss
          multiple
          accept="image/*"
          listType="picture-card"
          ref="upload_oss"
          :file-list="countyfileList"
          :dir="uploadURL"
          :limit="3"
          auto-upload
          :on-exceed="handleTip"
          :on-remove="handleRemove"
          :on-complete="handleImagesComplete"
        ></upload-oss>
      </li>
    </ul>
    <h4>市级审批附件：</h4>
    <div
      v-if="!cityAttach.length && (level !== 2 || !isGov)"
      class="p-5 text-center text-muted border rounded bg-light my-4"
    >
      暂无附件
    </div>
    <ul class="list-inline" v-if="level !== 2 || !isGov">
      <li v-for="(item, index) in cityAttach" class="attach-item" :key="index">
        <div class="attach-item-wrap">
          <img
            alt=""
            class="attach-item-img"
            :src="item"
            @click.stop="handlePreview(index, cityAttach)"
          />
        </div>
      </li>
    </ul>
    <ul class="list-inline" v-else>
      <li v-loading="saveLoading" class="attach-item">
        <upload-oss
          multiple
          accept="image/*"
          listType="picture-card"
          ref="upload_oss"
          :file-list="cityfileList"
          :dir="uploadURL"
          auto-upload
          :limit="3"
          :on-exceed="handleTip"
          :on-remove="handleRemove"
          :on-complete="handleImagesComplete"
        ></upload-oss>
      </li>
    </ul>
    <h4>省级审批附件：</h4>
    <div
      v-if="!provinceAttach.length && (level !== 1 || !isGov)"
      class="p-5 text-center text-muted border rounded bg-light my-4"
    >
      暂无附件
    </div>
    <ul class="list-inline" v-if="level !== 1 || !isGov">
      <li v-for="(item, index) in provinceAttach" class="attach-item" :key="index">
        <div class="attach-item-wrap">
          <img
            alt=""
            class="attach-item-img"
            :src="item"
            @click.stop="handlePreview(index, provinceAttach)"
          />
        </div>
      </li>
    </ul>
    <ul class="list-inline" v-else>
      <li v-loading="saveLoading" class="attach-item">
        <upload-oss
          multiple
          accept="image/*"
          listType="picture-card"
          ref="upload_oss"
          :file-list="provincefileList"
          :dir="uploadURL"
          auto-upload
          :limit="3"
          :on-exceed="handleTip"
          :on-remove="handleRemove"
          :on-complete="handleImagesComplete"
        ></upload-oss>
      </li>
    </ul>
  </el-dialog>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'
import { strFromOss } from '@/common/plugins/tools/format'
import { mapGetters } from 'vuex'
import { deleteOss } from '@/common/api/oss'

export default {
  props: {
    visible: Boolean,
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      saveLoading: false,
      countyAttach: [],
      cityAttach: [],
      provinceAttach: [],
      countyfileList: [],
      cityfileList: [],
      provincefileList: [],
    }
  },
  computed: {
    uploadURL() {
      return `/attachment/${this.infoData.project_white_list_id}`
    },
    ...mapGetters(['user', 'org']),
    level() {
      return +this.user.orgRegionLever
    },
    isGov() {
      return this.org.orgClass === 'org_gov_ny'
    },
  },
  watch: {
    infoData: {
      handler: function () {
        this.countyAttach = []
        this.countyAttach = arrayFromString(this.infoData.county_approval_attachment)
        this.countyAttach.forEach(item => {
          this.countyfileList.push({ url: item })
        })

        this.cityAttach = arrayFromString(this.infoData.city_approval_attachment)
        this.cityAttach.forEach(item => {
          this.cityfileList.push({ url: item })
        })

        this.provinceAttach = arrayFromString(this.infoData.pro_approval_attachment)
        this.provinceAttach.forEach(item => {
          this.provincefileList.push({ url: item })
        })
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    toImages(arr) {
      return arr.map(img => {
        return { src: img, title: '' }
      })
    },
    handleImagesComplete(images) {
      const attach = strFromOss(images)
      this.putData(attach)
    },
    handlePreview(index, arr) {
      this.$utils.viewer({
        images: this.toImages(arr),
        index,
      })
    },
    async handleRemove(file, fileList) {
      const attach = strFromOss(fileList)
      await this.putData(attach)
      deleteOss(file.url)
    },
    handleClose() {
      this.countyfileList = []
      this.cityfileList = []
      this.provincefileList = []
      this.$emit('update:visible', false)
    },
    handleTip() {
      this.$message.warning('最多只能上传三张附件')
    },
    async putData(attachment) {
      const data = {}
      if (this.level === 3) {
        data.county_approval_attachment = attachment
      } else if (this.level === 2) {
        data.city_approval_attachment = attachment
      } else if (this.level === 1) {
        data.pro_approval_attachment = attachment
      }

      await this.$api
        .updateData(
          this.$serviceName,
          'project_white_list',
          this.infoData.project_white_list_id,
          data
        )
        .then(() => {
          this.$emit('success')
        })
        .catch(res => {
          this.$message.error('上传失败')
          throw new Error(res)
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.attach-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 5px;
}

.attach-item-wrap {
  overflow: hidden;
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 4px;
  border: 1px solid #c0ccda;
  padding: 2px;

  &:hover {
    border-color: $primary;
  }

  .attach-item-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
</style>
